import { useEffect } from 'react';
import { Button, Switch, FormControlLabel } from '@material-ui/core';
import { ToastContainer, toast } from 'react-toastify';
import observable from './Observable';
import './App.css';

function handleClick() {
  observable.notify('User clicked button!');
}

function handleToggle() {
  observable.notify('User toggled switch!');
}

function logger(data: string) {
  console.log(`${Date.now()} ${data}`);
}

function toastify(data: string) {
  toast(data, {
    position: toast.POSITION.BOTTOM_RIGHT,
    closeButton: false,
    autoClose: 2000,
  });
}

function App() {
  useEffect(() => {
    observable.subscribe(logger);
    observable.subscribe(toastify);

    return () => {
      observable.unsubscribe(logger);
      observable.unsubscribe(toastify);
    };
  }, []);

  return (
    <div className="App">
      <Button variant="contained" onClick={handleClick}>
        Click me!
      </Button>
      <FormControlLabel control={<Switch name="" onChange={handleToggle} />} label="Toggle me!" />
      <ToastContainer />
    </div>
  );
}

export default App;
